<template>
	<view class="content">
		<view class="bg"></view>
		<view class="header-bg"></view>

		<!-- 身份证上传 -->
		<!-- <view class="box">
			<view class="box-title">
				<text class="title-left"></text>
				<text>身份证上传</text>
			</view>
			<view class="box-item">
				<view class="item-imgs" @click="chooseImg(1)">
					<image v-if="etcCancelForm.idImg1===''" class="item-img" src="/static/img/img1.png" mode=""></image>
					<image v-else class="item-img" :src="etcCancelForm.idImg1" mode=""></image>
					<view class="item-txt">拍摄正面</view>
				</view>
				<view class="item-imgs" @click="chooseImg(2)">
					<image v-if="etcCancelForm.idImg2===''" class="item-img" src="/static/img/img2.png" mode=""></image>
					<image v-else class="item-img" :src="etcCancelForm.idImg2" mode=""></image>
					<view class="item-txt">拍摄反面</view>
				</view>
			</view>
		</view> -->

		<!-- 行驶证上传 -->
		<!-- <view class="box1">
			<view class="box-title">
				<text class="title-left"></text>
				<text>行驶证上传</text>
			</view>
			<view class="box-items">
				<view class="item-imgs" @click="chooseImg(3)">
					<image v-if="etcCancelForm.carImg1===''" class="item-img1" src="/static/img/img3.jpg" mode="">
					</image>
					<image v-else class="item-img2" :src="etcCancelForm.carImg1" mode=""></image>
				</view>
				<view class="item-imgs" @click="chooseImg(4)">
					<image v-if="etcCancelForm.carImg2===''" class="item-img1" src="/static/img/img4.jpg" mode="">
					</image>
					<image v-else class="item-img2" :src="etcCancelForm.carImg2" mode=""></image>
				</view>
			</view>
		</view> -->
		<view class="box2">
			<view class="box-title">
				<text class="title-left"></text>
				<text>请选择车牌颜色</text>
			</view>
			<view class="box1-nav">
				<view class="nav-select" v-for="(t,i) in selectList" :key="i" @click="changeSelect(t)">
					<image class="select-img" :src="t.imgName" mode="widthFix"></image>
					<image v-if="selectIndex==t.id" class="select-icon" src="/static/img/select.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>

		<!-- 车牌号码 -->
		<view class="box2">
			<view class="box-title">
				<text class="title-left"></text>
				<text>车牌号码</text>
			</view>

			<view class="box-txt">
				<text class="txt-line"></text>
				<text class="txt-txt">极速注销</text>
				<text>各种车辆信息占用</text>
			</view>

			<view class="box-number">
				<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			</view>
			<!--联系人-->
			<view class="box-userInfo box-line">
				<view class="userInfo-name">联系人</view>
				<input type="text" v-model="etcCancelForm.name" placeholder="请输入姓名" placeholder-style="#A6A6A6">
			</view>
			<!-- 联系电话-->
			<view class="box-userInfo">
				<view class="userInfo-name">联系电话</view>
				<input type="number" v-model="etcCancelForm.phone" maxlength="11" placeholder="请输入联系电话"
					placeholder-style="#A6A6A6">
			</view>

		</view>
		<!-- 服务优势 -->
		<view class="etc-box">
			<image class="etc-img" src="/static/img/add-bg2.jpg" mode="widthFix"></image>
		</view>
		<!-- 办理流程 -->
		<view class="manage-box">
			<image class="manage-img" src="/static/img/add-lc.jpg" mode="widthFix"></image>
		</view>
		<!-- 提示信息 -->
		<view class="show-warn">
			友情提示：资料仅用于ETC注销业务使用，平台为第三方，专注于ETC注销代办业务，让您省心省力快速注销。
		</view>

		<!-- 提交 -->
		<view class="btn">
			<view class="btn-check" v-if="myIsShow">
				<u-checkbox-group @change="agree">
					<u-checkbox :checked='checked' shape="circle" inactiveColor="#B3B3B3" activeColor="#1A6FFD"
						size="18px">
					</u-checkbox>
				</u-checkbox-group>
				<text>同意服务并阅读</text>
				<view class="btn-check-txt" @click="goText('/pages/index/txt')">《隐私协议》</view>
				<view class="btn-check-txt" @click="goText('/pages/index/txtRead')">《代注销说明》</view>
			</view>
			<view class="btn-submit">
				<u-button color="#1A6FFD" text="下一步" shape='circle' :disabled="disabled" :loading='loading'
					loadingText="提交中" @click="submit"></u-button>
			</view>
			<!-- <button class="btn-submit" :disabled="!checked" @click="submit">提交</button> -->

		</view>
		<u-popup :show="showTips" :round="10" mode="top">
			<view class="pop-box">
				<view class="pop-title">平台服务流程</view>
				<view class="TipsContent">
					<scroll-view scroll-y="true" class="popup-scroll">
						<rich-text :nodes="content"></rich-text>
					</scroll-view>
				</view>
				<contact-button
				  tnt-inst-id="SLk_aEqp"
				  scene="SCE01288627"
				  size="88rpx"
				  icon="/static/img/custom.png"
				/>
			</view>
		</u-popup>
		<!-- 弹窗 -->
		<view class="fetchs" v-if="isFalse"></view>
		<view class="fetchs-box" v-if="isFalse">
			<view class="boxx" style="margin: 0 auto;">
				<view class="fetchs-box-top">
					<image src="/static/img/ok.png" mode="widthFix"></image>
				</view>
				<view class="">提交成功</view>
				<view class="sure-btn" @click.stop="toIndex()">确定</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import { uploadApi } from "../../api/common/img";
	import { getDictCode, getEtcCancelStmpIdList, postEtcCancel } from "../../api/api";
	import { UploadImg, UploadImgLocal } from "../../utils/upload";
	import Vue from 'vue';
	import { getRoles } from "../../api/common/login";
	import {appoint} from '@/api/my/my'
	let app = getApp();
	export default Vue.extend({
		data() {
			return {
				myIsShow: app.globalData.myIsShow,
				defaultNum: '',
				checked: false,//隐私协议选框
				disabled: false,//按钮提交中禁用
				loading: false,//按钮加载
				isFalse: false,
				etcCancelForm: {
					idImg1: '',   //身份证正面
					idImg2: '',   //身份证反面
					carImg1: '',  //行驶证正面
					carImg2: '',  //行驶证副面
					car_number: '',    //车牌号
					contactName: '',  //联系人姓名
					contactPhone: '', //联系人手机号
					newEnergy: false, //是否为新能源
					etcCancelLicencePlateColour: '',//车牌颜色 1.蓝牌,2.渐变绿牌，3.黄牌，4黄绿牌
				},
				carNum: '',

				//   二期新增提示语弹框
				showTips: false,
				content: null,//平台服务内容
				selectIndex: '',  //选择车牌颜色
				selectList: [
					{
						id: 1,
						imgName: '/static/img/select1.png'
					},
					{
						id: 2,
						imgName: '/static/img/select2.png'
					},
					{
						id: 3,
						imgName: '/static/img/select3.png'
					},
					{
						id: 4,
						imgName: '/static/img/select4.png'
					}
				],
			}
		},
		async onShow() {
			// #ifdef H5
			this.etcCancelForm={
    "car_number": "闽HHFFTY8",
    "name": "21",
    "phone": "21",
    "type": 1
}
			// #endif
			const roles = await getRoles()
			if (roles.indexOf('role:login_app') === -1) {
				uni.navigateTo({
					url: '/pages/common/nick_avatar'
				})
			} else {
				this.etcCancelForm.contactName = ''; //联系人姓名
				this.etcCancelForm.contactPhone = ''; //联系人手机号
				// idImg1: '',   //身份证正面
				// idImg2: '',   //身份证反面
				// carImg1: '',  //行驶证正面
				// carImg2: '',  //行驶证副面
				// car_number: '',    //车牌号
			}
			await this.getServiceProcess();//获取平台服务流程
		},

		methods: {
			// 选择车牌颜色
			changeSelect(t : any) {
				this.selectIndex = t.id
				this.etcCancelForm.type = this.selectIndex
			},
			// 获取弹框内平台服务流程
			async getServiceProcess() {
				const dictCode = {
					dictCode: 'platform_process'
				}
				const { data } = await getDictCode(dictCode)
				this.content = data[0].dictInfoValue;
			},

			// 上传图片
			chooseImg(type : any) {
				UploadImg((res) => {
					// console.log(res,'你是图片吗')
					if (type == 1) {
						this.etcCancelForm.idImg1 = res;
						// console.log('身份证正面', this.etcCancelForm.idImg1)
					} else if (type == 2) {
						this.etcCancelForm.idImg2 = res;
						// console.log('身份证反面', this.etcCancelForm.idImg2)
					} else if (type == 3) {
						this.etcCancelForm.carImg1 = res;
						// console.log('行驶证正面', this.etcCancelForm.carImg1)
					} else {
						this.etcCancelForm.carImg2 = res;
						// console.log('行驶证副面', this.etcCancelForm.carImg2)
					}
				}, 1)
				// const that = this;
				// uploadApi().then(res => {
				//   if (res.code == 'A000') {
				//     const ossData = res.data;
				//     UploadImg(ossData, (res) => {
				//       if (type == 1) {
				//         this.etcCancelForm.idImg1 = res;
				//         console.log('身份证正面', this.etcCancelForm.idImg1)
				//       } else if (type == 2) {
				//         this.etcCancelForm.idImg2 = res;
				//         console.log('身份证反面', this.etcCancelForm.idImg2)
				//       } else if (type == 3) {
				//         this.etcCancelForm.carImg1 = res;
				//         console.log('行驶证正面', this.etcCancelForm.carImg1)
				//       } else {
				//         this.etcCancelForm.carImg2 = res;
				//         console.log('行驶证副面', this.etcCancelForm.carImg2)
				//       }
				//
				//     }, type == 1 ? 1 : '')
				//
				//   }
				// })
			},
			// 车牌号
			numberInputResult(e : string) {
				e = e.trim()
				// console.log('结果--', e, e.length)
				if (e.length > 7) {
					this.etcCancelForm.newEnergy = true
				}
				this.etcCancelForm.car_number = e.substring(0, 2) + e.substring(2)
				// console.log('车牌号111', this.etcCancelForm.car_number)
				this.carNum = e.trim()
				// console.log('车牌号222', this.carNum)

			},
			// 弹窗
			toIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
				this.isFalse = false
			},
			// 同意
			agree() {
				this.checked = !this.checked
			},
			// 隐私协议
			goText(url : any) {
				uni.navigateTo({
					url: url
				})
			},
			// 提交
			submit() {
				if (!this.etcCancelForm.type) {
					uni.showToast({
						title: '请选择车牌颜色',
						icon: "none"
					});
					return
				}if (!this.etcCancelForm.car_number) {
					uni.showToast({
						title: '请输出车牌号',
						icon: "none"
					});
					return
				}if (!this.etcCancelForm.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: "none"
					});
					return
				}
				
				let regPhone = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (!regPhone.test(this.etcCancelForm.phone)) {
					uni.showToast({
						title: '请填写正确手机号',
						icon: "none"
					});
					return
				}

				// if (this.etcCancelForm.idImg1 == '') {
				// 	uni.showToast({
				// 		title: '身份证正面不能为空',
				// 		duration: 2000,
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// if (this.etcCancelForm.idImg2 == '') {
				// 	uni.showToast({
				// 		title: '身份证反面不能为空',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// if (this.etcCancelForm.carImg1 == '') {
				// 	uni.showToast({
				// 		title: '行驶证正本不能为空',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// if (this.etcCancelForm.carImg2 == '') {
				// 	uni.showToast({
				// 		title: '行驶证副本不能为空',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// if (this.carNum == '' || this.carNum.length < 7) {
				// 	uni.showToast({
				// 		title: '请填写车牌号',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// else {
				//   // 普通车牌
				//   if (this.etcCancelForm.newEnergy === false) {
				//     const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
				//     if (!reg.test(this.carNum)) {
				//       uni.showToast({
				//         title: '请填写正确的车牌号',
				//         icon: "none"
				//       })
				//       return
				//     }
				//   } else {
				//     // 新能源车牌
				//     const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/

				//     if (!reg.test(this.carNum)) {
				//       uni.showToast({
				//         title: '请填写正确的新能源车牌号',
				//         icon: "none"
				//       })
				//       return
				//     }
				//   }

				// }


				// if (this.etcCancelForm.contactName == '') {
				// 	uni.showToast({
				// 		title: '请填写联系人',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// if (this.etcCancelForm.contactPhone == '') {
				// 	uni.showToast({
				// 		title: '请填写手机号',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// let regPhone = /^1[3-9]\d{9}$/
				// if (!regPhone.test(this.etcCancelForm.contactPhone)) {
				// 	uni.showToast({
				// 		title: '请填写正确的手机号',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// if (!this.checked) {
				// 	uni.showToast({
				// 		title: '未勾选隐私协议',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				uni.$u.throttle(this.sureSubmit(), 2000)
				this.disabled = true;//按钮提交中禁用
				this.loading = true;//按钮加载
			},

			// 确定提交
			async sureSubmit() {
				
				
				
				const {code,data}=await appoint({
					car_number:this.etcCancelForm.car_number,
					name:this.etcCancelForm.name,
					phone:this.etcCancelForm.phone,
					type:this.etcCancelForm.type,
				})
				if(code==1){
					uni.showToast({
						icon:'none',
						title:"提交成功"
					})
					this.showTips = true;
				}
				
				
				
				// let that = this
				// const params = {
				// 	// idcardImg: this.etcCancelForm.idImg1,        //身份证正面
				// 	// idcardBackImg: this.etcCancelForm.idImg2,    //身份证反面
				// 	// drivingLicenseImg: this.etcCancelForm.carImg1, //行驶证正本
				// 	// drivingLicenseBackImg: this.etcCancelForm.carImg2,//行驶证副本
				// 	licensePlateNumber: this.etcCancelForm.car_number,     //车牌号
				// 	contactName: this.etcCancelForm.contactName,       //联系人姓名
				// 	contactPhone: this.etcCancelForm.contactPhone,    //联系人手机号
				// 	newEnergy: this.etcCancelForm.newEnergy,           //是否为新能源
				// 	etcCancelLicencePlateColour: this.etcCancelForm.etcCancelLicencePlateColour,//1蓝牌；2渐变绿牌；3黄牌；4黄绿牌
				// }
				// postEtcCancel(params).then(res => {
				// 	if (res.code === 'A000') {
				// 		// console.log('提交成功', res)
				// 		// uni.navigateTo({
				// 		//    url:'/pages/index/success'
				// 		// })
				// 		// this.isFalse = true
				// 		that.showTips = true;
				// 		//订阅模版消息
				// 		that.subscribeMessage();
				// 	} else {
				// 		that.disabled = false;//按钮提交中禁用
				// 		that.loading = false;//按钮加载
				// 	}

				// })
			},
			//订阅消息
			async subscribeMessage() {
				const that = this;
				const data = await getEtcCancelStmpIdList();
				uni.requestSubscribeMessage({
					tmplIds: data,
					success(res) {
						// console.log('订阅消息-成功', res)
						setTimeout(() => {
							
							that.showTips = true;
							that.disabled = false;//按钮提交中禁用
							that.loading = false;//按钮加载
						}, 500)
					},
					fail(res) {
						// console.log('订阅消息-失败', res)
					}
				})

			},
			// 关闭平台服务流程
			closeTips() {
				this.showTips = false;
				this.etcCancelForm.idImg1 = '';
				this.etcCancelForm.idImg2 = '';
				this.etcCancelForm.carImg1 = '';
				this.etcCancelForm.carImg2 = '';
				this.etcCancelForm.car_number = '';
				this.etcCancelForm.newEnergy = false;
				this.carNum = '';
				this.disabled = false;//按钮提交中禁用
				this.loading = false;//按钮加载
				// uni.redirectTo({
				// 	url: '/pages/index/success'
				// })
				// redirectTo('/pages/index/success?navOrder=2', 800)
			},
		}
	})
</script>

<style scoped>
	.content {
		padding-bottom: 185rpx;
	}

	.bg {
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.header-bg {
		width: 100%;
		/* height: 300rpx; */
		background-color: #0C77FB;
	}

	.box {
		margin: 0 27rpx;
		margin-top: -270rpx;
		padding: 37rpx 24rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
	}

	/* 身份证上传 */
	.box-title {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
	}

	.title-left {
		width: 8rpx;
		height: 26rpx;
		background-color: #0C77FB;
		margin-right: 12rpx;
	}

	.box-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 37rpx;
	}

	.item-img {
		width: 310rpx;
		height: 219rpx;
	}

	.item-txt {
		width: 310rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-color: #2188FE;
	}

	/* 行驶证上传 */
	.box1 {
		margin: 0 27rpx;
		margin-top: 26rpx;
		padding: 37rpx 24rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
	}

	.item-img1 {
		width: 200rpx;
		height: 200rpx;
	}

	.item-img2 {
		width: 310rpx;
		height: 219rpx;
	}

	.box-items {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 37rpx;
	}

	/* 车牌号码 */
	.box2 {
		margin: 0 27rpx;
		margin-top: 26rpx;
		padding: 37rpx 24rpx;
		padding-bottom: 0;
		border-radius: 15rpx;
		background-color: #ffffff;
	}

	.box-txt {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #818181;
		margin-top: 15rpx;
	}

	.txt-line {
		width: 10rpx;
		height: 10rpx;
		background-color: #0C77FB;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.txt-txt {
		color: #0C77FB;
	}

	/* 车牌号 */
	.box-number {
		padding: 0 29rpx;
		margin-top: 40rpx;
	}

	.box-userInfo {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		padding: 30rpx 29rpx;
	}

	.box-line {
		border-bottom: 2rpx solid #EFEFEF;
	}

	.userInfo-name {
		width: 182rpx;
	}

	/* 车牌颜色 */
	.box1-nav {
		margin-top: 51rpx;
		padding: 0 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.nav-select {
		width: 288rpx;
		height: 82rpx;
		margin-bottom: 34rpx;
		position: relative;
	}

	.select-img {
		width: 288rpx;
		height: 82rpx;
	}

	.select-icon {
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		position: absolute;
		top: -16rpx;
		right: -15rpx;
		z-index: 10;
	}

	/* 服务优势 */
	.etc-box {
		margin: 26rpx 26rpx 26rpx 26rpx;
		/* padding-bottom: 20rpx; */
		/* border: 1rpx solid pink; */
	}

	.etc-img {
		width: 100%;
		display: block;
	}

	/* 办理步骤 */
	.manage-box {
		margin: 5rpx 26rpx 16rpx 26rpx;
	}

	.manage-img {
		width: 698rpx;
		height: 244rpx;
		border-radius: 20rpx;
	}

	/* 提示信息 */
	.show-warn {
		width: 650rpx;
		text-align: center;
		font-size: 24rpx;
		color: #939393;
		line-height: 40rpx;
		/* padding-top: 20rpx; */
		padding-bottom: 70rpx;
		margin: auto;
		text-align: justify;
	}

	/* 提交 */
	.btn {
		width: 100%;
		/* padding: 0 27rpx; */
		padding-bottom: 41rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}

	.btn-check {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		padding-left: 58rpx;
		padding-top: 25rpx;
		padding-bottom: 23rpx;
	}

	.btn-check-txt {
		color: #1A6FFD;
	}

	.btn-submit {
		width: 696rpx;
		color: #fff;
		background-color: #1A6FFD;
		border-radius: 50rpx;
		font-size: 32rpx;
		margin: auto;
	}

	button::after {
		border: none;
	}

	/*  */
	.fetchs {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background: #000000;
		opacity: 0.5;
	}

	.fetchs-box {
		position: relative;
		top: -900rpx;
		left: 60rpx;
		z-index: 100;
		width: 630rpx;
		height: 408rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
	}

	.boxx {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fetchs-box-top image {
		margin-top: 68rpx;
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 25rpx;
	}

	.sure-btn {
		margin-top: 52rpx;
		width: 550rpx;
		height: 100rpx;
		background: #1A6FFD;
		border-radius: 15rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
	}

	/*提示弹窗样式*/
	.pop-box {
		width: 700rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background: #FFFFFF;
		border-radius: 15rpx;
		/* border: 1rpx solid pink; */
		margin: auto;
	}

	.pop-title {
		font-size: 32rpx;
		font-weight: 600;
		padding-top: 34rpx;
		padding-bottom: 34rpx;
	}

	.TipsContent {
		padding: 0 30rpx 30rpx;
		line-height: 45rpx;
		text-align: justify;
		font-size: 27rpx;
	}

	.popup-scroll {
		height: 300rpx;
	}

	.closeTips {
		width: 210rpx;
		height: 65rpx;
		/*line-height: 90rpx;*/
		text-align: center;
		background: #1A6FFD;
		border-radius: 15rpx;
		font-size: 27rpx;
		line-height: 65rpx;
		/*font-weight: bold;*/
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}
</style>